// ignore_for_file: unused_field

import 'package:collection/collection.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:tencent_im_base/tencent_im_base.dart';
import 'package:tencent_cloud_chat_uikit/base_widgets/tim_ui_kit_base.dart';
import 'package:tencent_cloud_chat_uikit/base_widgets/tim_ui_kit_statelesswidget.dart';
import 'package:tencent_cloud_chat_uikit/business_logic/separate_models/tui_chat_separate_view_model.dart';
import 'package:tencent_cloud_chat_uikit/business_logic/view_models/tui_self_info_view_model.dart';
import 'package:tencent_cloud_chat_uikit/data_services/message/message_services.dart';
import 'package:tencent_cloud_chat_uikit/data_services/services_locatar.dart';

import 'package:tencent_cloud_chat_uikit/ui/utils/platform.dart';
import 'package:tencent_cloud_chat_uikit/ui/views/TIMUIKitChat/TIMUIKitMessageItem/TIMUIKitMessageReaction/tim_uikit_message_reaction_utils.dart';
import 'package:tencent_cloud_chat_uikit/ui/widgets/extended_wrap/extended_wrap.dart';

class TIMUIKitMessageReactionShowItem extends TIMUIKitStatelessWidget {
  /// the unicode of the emoji
  final int sticker;

  /// the list contains the name who choose the current emoji
  final List nameList;

  /// current message
  final V2TimMessage message;

  /// show the details of message reaction
  final Function(int sticker) onShowDetail;

  /// the member in current chat
  final List<V2TimGroupMemberFullInfo?> memberList;

  TIMUIKitMessageReactionShowItem(
      {required this.message,
      required this.sticker,
      required this.memberList,
      required this.onShowDetail,
      required this.nameList,
      Key? key})
      : super(key: key);

  final TUISelfInfoViewModel selfInfoModel = serviceLocator<TUISelfInfoViewModel>();
  final MessageService _messageService = serviceLocator<MessageService>();

  clickOnCurrentSticker() async {
    for (int i = 0; i < 5; i++) {
      final res = await modifySticker();
      if (res.code == 0) {
        break;
      }
    }
  }

  Future<V2TimValueCallback<V2TimMessageChangeInfo>> modifySticker() async {
    return await Future.delayed(const Duration(milliseconds: 50), () async {
      return await MessageReactionUtils.clickOnSticker(message, sticker);
    });
  }

  @override
  Widget tuiBuild(BuildContext context, TUIKitBuildValue value) {
    final theme = value.theme;
    final option1 = nameList.length;
    final TUIChatSeparateViewModel model = Provider.of<TUIChatSeparateViewModel>(context);
    return LayoutBuilder(builder: (context, constraints) {
      return Container(
        padding: const EdgeInsets.symmetric(horizontal: 8),
        decoration: BoxDecoration(
          color: const Color(0x19727271),
          borderRadius: BorderRadius.circular(20),
        ),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            GestureDetector(
              onTap: clickOnCurrentSticker,
              child: Container(
                margin: EdgeInsets.only(
                  bottom: (!PlatformUtils().isIOS) ? 4 : 2,
                  top: (!PlatformUtils().isIOS) ? 4 : 0,
                ),
                child: Text(
                  String.fromCharCode(sticker),
                  style: TextStyle(
                    fontSize: (!PlatformUtils().isIOS) ? 12 : 16,
                  ),
                ),
              ),
            ),
            Container(
              margin: const EdgeInsets.only(left: 6, right: 6),
              child: SizedBox(
                width: 1,
                height: 14,
                child: DecoratedBox(
                  decoration: BoxDecoration(color: theme.weakTextColor),
                ),
              ),
            ),
            ConstrainedBox(
              constraints: BoxConstraints(maxWidth: constraints.maxWidth * .8),
              child: ExtendedWrap(
                maxLines: 1,
                spacing: 4,
                crossAxisAlignment: WrapCrossAlignment.center,
                alignment: WrapAlignment.spaceBetween,
                overflowWidget: GestureDetector(
                  onTap: () {
                    onShowDetail(sticker);
                  },
                  child: SizedBox(
                    height: 12,
                    child: Text(
                      "...共$option1人",
                      overflow: TextOverflow.ellipsis,
                      style: TextStyle(fontSize: 12, height: 1, color: hexToColor("616669")),
                      maxLines: 1,
                    ),
                  ),
                ),
                children: [
                  ...nameList.map(
                    (userId) {
                      String showName = '';
                      if (memberList.isNotEmpty) {
                        final V2TimGroupMemberFullInfo? memberInfo =
                            memberList.firstWhereOrNull((e) => e?.userID == userId);
                        if (memberInfo != null) {
                          if (memberInfo.friendRemark?.isNotEmpty ?? false) {
                            showName = memberInfo.friendRemark!;
                          } else if (memberInfo.nameCard?.isNotEmpty ?? false) {
                            showName = memberInfo.nameCard!;
                          } else if (memberInfo.nickName?.isNotEmpty ?? false) {
                            showName = memberInfo.nickName!;
                          }
                        } else {
                          return const SizedBox();
                        }
                      }
                      return GestureDetector(
                        onTap: () {
                          if (model.onTapAvatar != null) {
                            if (userId != selfInfoModel.loginInfo?.userID) {
                              model.onTapAvatar!(userId);
                            }
                          }
                        },
                        child: SizedBox(
                          height: 12,
                          child: Text(
                            showName,
                            overflow: TextOverflow.ellipsis,
                            style: TextStyle(
                              fontSize: 12,
                              height: 1,
                              color: hexToColor("616669"),
                            ),
                            maxLines: 1,
                          ),
                        ),
                      );
                    },
                  ),
                ],
              ),
            ),
          ],
        ),
      );
    });
  }
}
